import Vue from 'vue';
// 引入VueRouter
import VueRouter from 'vue-router';
// 引入 store
import store from '@/store';
// 应用VueRouter插件
Vue.use(VueRouter);
// 引入组件
import AppHome from '@/pages/Home';
import AppLogin from '@/pages/Login';
import AppSearch from '@/pages/Search';
import AppRegister from '@/pages/Register';
import AppDetail from '@/pages/Detail';
import ShoppingCart from '@/pages/ShoppingCart';
import Trade from '@/pages/Trade';
import Pay from '@/pages/Pay';
import PaySuccess from '@/pages/PaySuccess';
import Center from '@/pages/Center';
import { removeToken } from '@/utils/token';

// 创建并暴露路由器
const router = new VueRouter({
	routes: [
		{
			path: '/home',
			component: AppHome,
			meta: {
				isShowFooter: true,
				title: '尚品汇-综合购物首选',
			},
		},
		{
			// 面试题

			// params参数可传可不传
			// 在占位后面加一个问号

			// 当params传递的参数是空字符串则路由跳转会出现问题
			// 使用undefined解决
			name: 'search',
			path: '/search/:keyword?',
			component: AppSearch,
			meta: {
				isShowFooter: true,
				title: '尚品汇-搜索',
			},
		},
		{
			path: '/login',
			component: AppLogin,
			meta: {
				isShowFooter: false,
				title: '尚品汇-登录',
			},
		},
		{
			path: '/register',
			component: AppRegister,
			meta: {
				isShowFooter: false,
				title: '尚品汇-注册',
			},
		},
		{
			path: '/detail/:skuId',
			name: 'detail',
			component: AppDetail,
			meta: {
				isShowFooter: true,
			},
		},
		{
			path: '/shoppingcart',
			component: ShoppingCart,
			meta: {
				isShowFooter: true,
				title: '尚品汇-我的购物车',
			},
		},
		{
			path: '/trade',
			component: Trade,
			meta: {
				isShowFooter: true,
				title: '尚品汇-结算',
			},
		},
		{
			path: '/pay',
			component: Pay,
			meta: {
				isShowFooter: true,
				title: '尚品汇-支付',
			},
		},
		{
			path: '/paysuccess',
			component: PaySuccess,
			meta: {
				isShowFooter: true,
				title: '尚品汇-支付成功！',
			},
		},
		{
			path: '/center',
			component: Center,
			meta: {
				isShowFooter: true,
				title: '尚品汇-我的订单',
			},
		},
		// 重定向
		{
			path: '*',
			redirect: '/home',
		},
	],
	scrollBehavior(to, from, savedPosition) {
		// 始终滚动到顶部
		return { y: 0 };
	},
});

router.beforeEach(async (to, from, next) => {
	// console.log('beforeEach', to, from);
	if (to.name === 'detail') {
		document.title = '正在加载...';
	}
	let token = store.state.user.token;
	let name = store.state.user.userInfo.name;
	if (token) {
		// 已登录跳转登录页或注册页不允许
		if (to.path === '/login' || to.path === '/register') {
			next('/');
		} else {
			// 已登录跳转其他页面方行
			if (name) {
				next();
			} else {
				try {
					await store.dispatch('user/getUserInfo');
				} catch (error) {
					// token失效
					removeToken();
					store.commit('user/REMOVETOKEN');
					store.commit('user/REMOVEUSERINFO');
					next('/login');
				}
				next();
			}
		}
	} else {
		next();
	}
});

router.afterEach(async (to, from) => {
	if (to.meta.title) {
		document.title = to.meta.title;
	}
	if (to.name === 'detail') {
		// 派发actions 请求数据
		await store.dispatch('detail/getDetailList', to.params.skuId);
		document.title = store.state.detail.detailDataList.skuInfo.skuName;
	}
});

export default router;
